<script setup lang="ts">
import { ref, watch } from "vue";
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { useInfiniteScroll } from "@/composables/useInfiniteScroll";
import { getOrderList } from "@/api/user";

const { items: list, isLoading, hasMore, error, resetAndLoad, loadMore } = useInfiniteScroll(getOrderList);

/** 查询参数  */
const queryParams = ref({});

watch(queryParams, (newQueryParams) => {
  console.log("Query Params changed:", newQueryParams);
  resetAndLoad(newQueryParams);
});

// 页面加载
onLoad(() => {
  resetAndLoad(queryParams.value);
});

// 监听用户下拉动作
onPullDownRefresh(() => {
  resetAndLoad(queryParams.value).finally(() => {
    // 停止当前页面下拉刷新
    uni.stopPullDownRefresh();
  });
});

// 页面滚动到底部的事件
onReachBottom(() => loadMore());

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
<view class="relative overflow-hidden">
  <page-navbar title="兑换记录" :hideTitle="true" :isScrolled="isScrolled"></page-navbar>

  <page-title title="兑换记录"></page-title>

  <page-list :list="list" :hasMore="hasMore" :isLoading="isLoading" :loadMore="loadMore">
    <view v-for="item in list" :key="item.id" class="mx-3 mt-4 bg-white p-3 rounded-lg">
      <view class="text-sm">订单编号: {{item.ordersn}}</view>
      <view class="text-sm">兑换物品: {{item.goods_title ? item.goods_title : '-'}}</view>
      <view class="text-sm">花费积分: {{item.price ? item.price : '-'}}</view>
      <view class="text-sm">兑换时间: {{item.created_at}}</view>
    </view>
  </page-list>
</view>
</template>
